今天我們要探討 React 最具革命性的核心技術：Virtual DOM（虛擬 DOM） 與 Reconciliation（協調算法）。

一、 真正的效能瓶頸：真實 DOM 很重！

瀏覽器上的原生 DOM 節點（Real DOM）非常龐大且沉重。你只要用 JS 建立一個簡單的 document.createElement('div')，這個物件身上就包含上百個原生屬性與事件監聽器。

如果每次資料更新，我們都把舊的 Real DOM 砍掉重建，瀏覽器就必須頻繁進行成本極高的 Reflow（排版重繪） 與 Repaint（渲染繪製），造成畫面卡頓。

二、 什麼是 Virtual DOM (VDOM)？

Virtual DOM 是一棵用純粹 JavaScript 物件描述真實 DOM 結構的「輕量級樹狀記憶體模型」。

還記得昨天介紹的 React Element 嗎？

// Virtual DOM 的節點本質就是輕量的 JS 物件
{
  type: 'button',
  props: {
    className: 'btn-primary',
    children: '點擊我'
  }
}

因為它只是記憶體中的普通 JS 物件，創建與比對的速度比直接操作 Real DOM 快上數百倍！

三、 React 的更新流程：從 Render 到 Commit

當 State 改變時，React 並非直接修改畫面，而是經歷以下三個步驟：

Render 階段（計算）：執行組件函數，產生一棵「全新的 Virtual DOM 樹」。

Reconciliation 階段（比對 / Diffing）：將「新 Virtual DOM 樹」與「舊 Virtual DOM 樹」進行比對，找出真正有變動的最小差異（Patches）。

Commit 階段（更新）：將這個最小差異一口氣批次更新到瀏覽器的 Real DOM 上。

State 變更 ──► 產生新 VDOM ──► Reconciliation (Diffing 演算法比對新舊 VDOM) ──► 批次 Commit 更新 Real DOM

四、 核心靈魂：Reconciliation (協調算法)

如果傳統比對兩棵樹的演算法，時間複雜度是 O(n^3)（若頁面有 1000 個節點，需要進行十億次比對，效能直接崩潰）。React 提出了 Reconciliation 啟發式演算法，把時間複雜度奇蹟般降到了 O(n)！它基於兩個核心假設：

1. 不同型別的元素會產生不同的樹 (Different Element Types)若節點標籤改變（例如從 <div> 變成 <section>），React 會直接銷毀整個舊節點及其所有子節點，重新建立新樹，絕不浪費時間比對內建屬性。
2. 開發者會透過 key 屬性來提示子元素的穩定性在渲染列表時，React 透過唯一的 key 來比對前後兩次渲染的元素。有了 key，React 就能精準判斷該元素是「被移動了」、「新增了」還是「刪除了」，而不必銷毀重建。